<template>
  <div class="widgetFlashPoint_container" >
    <div class="dot" :style="styleColor.stylePoint"></div>
    <div class="pulse" :style="styleColor.styleShadow"></div>
  </div>
</template>

<script>
export default {
  name: "widgetFlashPoint",
  components: {}, //暂时空白
  props: {    //仿照超链，props项保留
    value: Object,
    ispreview: Boolean
  },
  data() {    //仿照超链，data项保留
    return {
      options: {}
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      //计算一下我的热点组件里面元素的大小和位置。我的组件初始化的时候，外面框的长宽为40，圆点的长宽度是8，边线宽是4，动态阴影的长宽是30，边线宽是6，
      // 现在要根据缩放大小，将这些初始值都按比例修改一下
      let aimWidth=this.transStyle.width;
      let persent=parseFloat(aimWidth)/40;


      //返回参数内容
      return {
        position: this.ispreview ? "absolute" : "static",
        stylePoint: "border: "+(4*persent)+"px solid "+(this.transStyle.color || "#31E5FA")
              +";width:"+(8*persent)+"px;" +
          "  height: "+(8*persent)+"px;" +
          "  left:"+(16*persent)+"px;" +
          "  top:"+(16*persent)+"px;",
        styleShadow: "border: "+(4*persent)+"px solid "+(this.transStyle.color || "#31E5FA")
              +";width:"+(30*persent)+"px;" +
          "  height:"+(30*persent)+"px;" +
          "  left:"+(5*persent)+"px;" +
          "  top:"+(5*persent)+"px;",
        //"font-weight": this.transStyle.fontWeight || "600",
        text: this.transStyle.text || "我的热点",
        "font-size": this.transStyle.fontSize + "px" || "12px",
        width: this.transStyle.width + "px",   //这是组件的整体设置，也就是设置面板默认的组件大小和位置的设置，这里我们要继续拧一些处理
        height: this.transStyle.width+ "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value;
  
  },
  methods: {}
}
</script>

<style scoped>
@keyframes warn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.0;
  }
}
@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

.widgetFlashPoint_container {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0px solid #000;
  text-align: center;

}
/* 保持大小不变的小圆圈  */
.widgetFlashPoint_container .dot {
  position:absolute;
  width: 8px;
  height: 8px;
  left:16px;
  top:16px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border: 4px solid #31e5fa;
  border-radius: 20px;
  z-index: 2;

}
/* 产生动画（向外扩散变大）的圆圈  */
.widgetFlashPoint_container .pulse {
  position:absolute;
  width: 30px;
  height: 30px;
  left:5px;
  top:5px;
  border: 6px solid #31e5fa;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
  border-radius: 300px;
  z-index: 1;
  opacity: 0;
  -webkit-animation: warn 1s ease-out;
  -moz-animation: warn 1s ease-out;
  animation: warn 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
</style>
